// rfc
/*
  学习目标：掌握  - hooks三个使用限制


  



什么是React中的特殊函数：

1. 函数式组价
2. useXxx命名的自定义hooks函数
 
*/
import React, { useState } from 'react';

const isShow = true;
export default function App() {
  const [count, setCount] = useState(83); // 84
  // 1. ❌不能在if else语句中使用hooks
  if (isShow) {
    // const [title, setTitle] = useState('83');
  }
  const [msg, setMsg] = useState('hello React');

  const list = [1, 2, 3];
  for (let i = 0; i < list.length; i++) {
    // 2. ❌不能在for语句中使用hooks
    // const [title, setTitle] = useState('83');
  }

  return (
    <div>
      App
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>点我+1</button>
      <hr />
      <h1>{msg}</h1>
      <button onClick={() => setMsg(msg + '~')}>点我+~</button>
    </div>
  );
}

// 非普通函数：
// 1. 函数式组件： 函数名大写字母开头
// 2. 自定义hooks:  use+驼峰命名的函数

function hello() {
  // 3. ❌ 不能在普通函数中使用hooks
  // ❌ const [xxx, setXxx] = useState('123');
  return <h1>123</h1>;
}
